<template>
  <div>
    <div :key="item.id" class="subject" v-for="(item, index) in list">
      <span>{{ item.a }}</span>
      <span>+</span>
      <span>{{ item.b }}</span>
      <span>=</span>
      <input @change="count(index, $event.target.value)" type="number" />
      <button @click="submitAnswer">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      answer: ["", "", "", "", ""],
    };
  },
  created () {
    for (let i = 0; i < 5; i++) {
      const a = Math.floor(Math.random() * 11);
      const b = Math.floor(Math.random() * 11);
      this.list.push({
        id: Date.now() + i,
        a,
        b,
        count: a + b,
      });
    }
  },
  mounted () {
    this.$bus.$emit(
      "RightAnswer",
      this.list.map((item) => item.count)
    );

  },
  methods: {
    count (index, value) {
      console.log(index, value);
      // this.answer[index] = value.trim();
      this.$set(this.answer, index, value.trim())
    },
    submitAnswer () {
      console.log(this.answer);
      this.$bus.$emit("answer", this.answer);
    },
  },
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>